<template>
  <div>
    <div class="vip">
      <van-row>
        <van-col span="8">
          <van-image
            round
            width="5rem"
            height="5rem"
            src="https://img.yzcdn.cn/vant/cat.jpeg"
            class="tp"
          />
        </van-col>
        <van-col span="16">
          <div class="lh">
            <div>
              <span style="color:#fff">huangjinl</span>
              <span class="er">
                <van-icon name="edit" color="#fff" size="20" />
              </span>
              <span style="color:#fff">
                <van-icon name="gem" color="#A655EF" size="20" />钻石
              </span>
            </div>
            <div class="yh">用户名：huangjinl</div>
            <div>
              <span class="jxz">京享值88888</span>
            </div>
          </div>
        </van-col>
      </van-row>
    </div>
    <div class="bj"></div>
    <van-grid>
      <van-grid-item @click="dianjia(0)" style="color:#E93B3D" icon="orders-o" text="我的订单" />
      <van-grid-item @click="dianjia(1)" style="color:#DD9E58" icon="credit-pay" text="待付款" />
      <van-grid-item @click="dianjia(2)" style="color:#DD9E58" icon="logistics" text="待收货" />
      <van-grid-item @click="dianjia(3)" style="color:#DD9E58" icon="after-sale" text="退换/售后" />
    </van-grid>
    <div class="bj"></div>
    <van-row>
      <van-col span="12" class="sp">
        <p style="padding-left: 25%">5</p>
        <p>商品收藏</p>
      </van-col>
      <van-col span="12" style="padding-left: 10%">
        <p style="padding-left: 15%">0</p>
        <p>我的足迹</p>
      </van-col>
    </van-row>
  </div>
</template>
<script>
import { mapMutations } from 'vuex'
export default {
  data () {
    return {}
  },
  created () {},
  methods: {
    ...mapMutations(['setVipActive']),
    dianjia (active) {
      this.setVipActive(active)
      this.$router.push('/order')
    }
  }
}
</script>
<style lang="less" scoped>
.sp {
  padding-left: 25%;
}

.bj {
  background-color: #f7f7f7;
  height: 10px;
}
.jxz {
  background-color: #c8483f;
  font-size: 14px;
  color: #ccc;
  border-radius: 5px;
}
.yh {
  font-size: 14px;
  color: #ccc;
}
.er {
  margin: 0 5px 0 5px;
}
.lh {
  margin-top: 40px;
}
.tp {
  margin: 35px 0 0 50px;
}
.vip {
  height: 150px;
  margin-top: 47px;
  background-color: #f8604f;
}
</style>
